@charset "utf-8";
@import "reset";
$color:#868585;
body{
    min-width: 1280px;
    background: url(../../img/BG.png);
}

.web{
    width: 1064px;
    margin: 0 auto;
    background: #000000;
}
//头部
            .nav{
                height: 116px;
                width: 976px;
                margin: 0 auto;
                .nav-lt{
                    vertical-align: middle;
                    display: block;
                    width: 281px;
                    margin-top: 40px;
                    float: left;
                    img{
                        width: 100%;
                    }
                }
                .nav-rt{
                    width: 588px;
                    height: 116px;
                    float: right;
                    .nav-one{
                        width: 290px;
                        float: right;
                        font-size: 0;
                        .nav-one1{
                            float: left;
                            li{
                                display: inline-block;
                                margin-top: 22px;
                                a{
                                    color:$color;
                                    font-size: 12px;
                                    display: inline-block;
                                    font-family: "微软雅黑";
                                }
                                a::after{
                                    content: "";
                                    width: 0px;
                                    border-bottom: 2px solid #0dafd2;
                                    margin: 0 auto;
                                    margin-top: 5px;
                                    display: block;
                                }
                                a:hover::after{
                                    transition: all 0.5s ease;
                                    width:100%;
                                }
                                a:hover{
                                    color: #0dafd2;
                                    
                                }
                            }
                            li::after{
                                content: "";
                                width: 1px;
                                height: 10px;
                                background: #868585;
                                display: inline-block;
                                margin:0 15px;
                                
                            }
                            li:last-child::after{
                                display: none;
                            }
                        }
                        
                       .nav-one2{
                            display: inline-block;
                            float: left;
                            margin: 19px 0 0 35px;
                            .p1{
                               
                                color: #868585;
                                margin-right: 25px;
                                cursor: pointer;
                            }
                            
                            .p2{
                                color: #868585;
                                margin-right: 25px;
                                cursor: pointer;
                            }
                            .p3{
                                 color: #868585;
                                 margin-right: 25px;
                                  cursor: pointer;
                            }
                            .p4{
                                 cursor: pointer;
                                 color: #868585;
                            }
                           i:hover{
                               color: #0dafd2;
                           }
                        }
                        
                        
                    }
                    .nav-two{
                        width: 540px;
                        margin-top: 54px;
                        margin-left: 15px;
                        font-size: 0;
                        ul{
                            li{
                                display: inline-block;
                                vertical-align: middle;
                                a{
                                   font-family:"微软雅黑" ; 
                                   font-size: 24px;
                                   color: white;
                                   height: 36px;
                                   position: relative;
                                }
                                a::after{
                                    content: "";
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    width: 0px;
                                    border-bottom: 2px solid #0dafd2;
                                }
                                a:hover{
                                    color: #0dafd2;
                                }
                            }
                            li::after{
                                content: "";
                                width: 1px;
                                height: 31px;
                                background: #e3f4f7;
                                display: inline-block;
                                margin: 0 15px 0 18px;
                                vertical-align: top;
                            }
                            li:last-child::after{
                                display: none;
                            }
                            li:hover a::after{
                                transition: all 0.5s ease;
                                width:48px;
                            }
                        }
                    }
                }
            }
.top2{
    width: 1064px;
    img{width: 675px;
        height: 215px;
    }
    
}
.top2_left{
    width: 388px;
    height: 215px;
    background: white;
    padding-top: 27px;
    padding-left: 31px;
    float: left;
    .left_img{
        float: left;
        img{
            width: 113px;
            height: 113px;
        }
    }
    .left_personal{
        float: left;
        font-size: 12px;
        line-height: 20px;
        margin-left: 28px;
    }
    .personal_a{
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: bold;
        span{
            font-size: 12px;
            color: #0DAFD2;
            font-weight: normal;
        }
    }
    .personal_b{
        color: #747474;
        letter-spacing: 1px;
    }
    .personal_c{
        color: #747474;
    }
    .personal_c img{
        width: 12px;
        height: 12px;
        position: relative;
        top: 2px;
    }
    .fan_left{
        border-right: 2px solid #747474;
        width: 55px;
        text-align: center;
        float: left;
        margin-top: 18px;
        span:first-child{
            font-size: 12px;
            color: #747474;
        }
        span:last-child{
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 1px;
        }
    }
    .fan_right{
        width: 55px;
        text-align: center;
        float: left;
        margin-top: 18px;
        span:first-child{
            font-size: 12px;
            color: #747474;
        }
        span:last-child{
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 1px;
        }
    }
    .left_icon{
        margin-top: 22px;
        margin-left: 130px;
        height: 33px;
        color: #747474;
        li{
            float: left;
            padding: 0 5px;
        }
    }
    .left_icon i{
        font-size: 21px;
    }
    .left_icon i:last-child{
        font-size: 30px;
    }
}
.top3_nav{
    width: 1064px;
    height: 69px;
    line-height: 69px;
    border-bottom: 2px solid #464545;
    li{
        float: left;
        padding-left: 40px;
    }
    li:first-child{
        padding-left: 43px;
    }
    li:nth-child(2){
        padding-left: 43px;
    }
    li:nth-child(3){
        padding-left: 43px;
    }
    .liebiao{
        float: left;
        a{
             color: #7d7c7c;
        }
        a:hover{
            color: white;
        }
    }
    .search{
        width: 172px;
        height: 23px;
        border: 1px solid #4d4c4c;
        float: right;
        margin-top: 24px;
        margin-right: 70px;
    }
    .search input:first-child{
        height: 21px;
        width: 140px;
        float: left;
        border: none;
        outline: none;
        background: black;
        color: deepskyblue;
        padding-left: 2px;
    }
    .search input:nth-child(2){
        padding-right: 6px;
        float: right;
        padding-top: 3px;
    }
}
.New_rec{
    width: 972px;
    height: 270px;
    margin-left: 43px;
    border-bottom: 1px solid #4d4d4d;
    h2{
        font-size: 32px;
        margin-top: 24px;
        color: white;
    }
}
            .zcdh {
                display: inline-block;
                width: 216px;
                height: 2118px;
                margin: 29px 5px 37px 44px;
                ul {
                    font-size: 0px;
                    li:nth-child(1) {
                        a {
                            display: inline-block;
                            width: 216px;
                            height: 41px;
                            background: #252525;
                            line-height: 41px;
                            font-size: 14px;
                            color: #787777;
                            margin-bottom: 4px;
                            transition-duration: 1s;
                            .hao {
                                font-size: 18px;
                                color: #787777;
                                margin-left: 20px;
                                margin-right: 18px;
                                transition-duration: 1s;
                            }
                        }
                        a:hover>.hao {
                            background: #000;
                            color: #fff;
                        }
                        a:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                    li:nth-child(2) {
                        a {
                            display: inline-block;
                            width: 216px;
                            height: 41px;
                            background: #252525;
                            line-height: 41px;
                            font-size: 14px;
                            margin-bottom: 4px;
                            transition-duration: 1s;
                            color: #787777;
                            .xin {
                                font-size: 18px;
                                color: #787777;
                                margin-left: 20px;
                                margin-right: 18px;
                                transition-duration: 1s;
                            }
                        }
                        a:hover>.xin {
                            background: #000;
                            color: #fff;
                        }
                        a:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                    li:nth-child(3) {
                        a {
                            display: inline-block;
                            width: 216px;
                            height: 41px;
                            background: #252525;
                            line-height: 41px;
                            font-size: 14px;
                            margin-bottom: 4px;
                            transition-duration: 1s;
                            color: #787777;
                            .pl {
                                font-size: 18px;
                                color: #787777;
                                margin-left: 20px;
                                margin-right: 18px;
                                transition-duration: 1s;
                            }
                        }
                        a:hover>.pl {
                            background: #000;
                            color: #fff;
                        }
                        a:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                    li:nth-child(4) {
                        a {
                            display: inline-block;
                            width: 216px;
                            height: 41px;
                            background: #252525;
                            line-height: 41px;
                            font-size: 14px;
                            margin-bottom: 4px;
                            transition-duration: 1s;
                            color: #787777;
                            .shoucang {
                                font-size: 18px;
                                color: #787777;
                                margin-left: 20px;
                                margin-right: 18px;
                                transition-duration: 1s;
                            }
                        }
                        a:hover>.shoucang {
                            background: #000;
                            color: #fff;
                        }
                        a:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                    li:nth-child(5) {
                        a {
                            display: inline-block;
                            width: 216px;
                            height: 41px;
                            background: #252525;
                            line-height: 41px;
                            font-size: 14px;
                            margin-bottom: 4px;
                            transition-duration: 1s;
                            color: #787777;
                            .tishi {
                                font-size: 18px;
                                color: #787777;
                                margin-left: 20px;
                                margin-right: 18px;
                                transition-duration: 1s;
                            }
                        }
                        a:hover>.tishi {
                            background: #000;
                            color: #fff;
                        }
                        a:hover {
                            background: #000;
                            color: #fff;
                        }
                    }
                    li:nth-child(6) {
                        a {
                            display: block;
                            margin-top: 4px;
                            img {
                                width: 216px;
                                height: 178px;
                            }
                        }
                    }
                    li:nth-child(7) {
                        a {
                            display: block;
                            margin-top: 10px;
                            img {
                                width: 216px;
                                height: 123px;
                            }
                        }
                    }
                    li:nth-child(8) {
                        a {
                            display: block;
                            margin-top: 8px;
                            img {
                                width: 216px;
                                height: 125px;
                            }
                        }
                    }
                    li:nth-child(9) {
                        a {
                            display: block;
                            margin-top: 11px;
                            img {
                                width: 216px;
                                height: 177px;
                            }
                        }
                    }
                    li:nth-child(10) {
                        a {
                            display: block;
                            margin-top: 11px;
                            img {
                                width: 216px;
                                height: 122px;
                            }
                        }
                    }
                    li:nth-child(11) {
                        a {
                            display: block;
                            margin-top: 13px;
                            img {
                                width: 216px;
                                height: 124px;
                            }
                        }
                    }
                    li:nth-child(12) {
                        a {
                            display: block;
                            width: 216px;
                            height: 986px;
                            background: #252525;
                            padding-top: 14px;
                            img {
                                width: 216px;
                                height: 143px;
                            }
                        }
                    }
                }
            }
              //右侧
    .ydh {
        display: inline-block;
        margin-left: 7px;
        font-size: 0;
        vertical-align: top;
        margin-top: 28px;
        .xydh {
            width: 155px;
            background: #252525;
            h1 {
                width: 137px;
                height: 39px;
                line-height: 39px;
                text-align: center;
                font-size: 14px;
                color: #0dafd2;
                display: inline-block;
                border-bottom: 1px solid #444444;
                margin-left: 9px;
            }
            a {
                display: inline-block;
                margin-left: 9px;
                font-size: 12px;
                color: #7d7c7c;
                line-height: 29px;
            }
             a:hover {
                    color: #FFF;
                }
            p {
                width: 137px;
                border-top: 1px solid #444444;
                margin-bottom: 10px;
                text-align: right;
                margin-left: 9px;
                a {
                    color: #0dafd2;
                }
                 a:hover {
                    color: #FFF;
                }
            }
        }
        .gongzuo {
            width: 155px;
            background: #252525;
            h1 {
                width: 137px;
                height: 39px;
                line-height: 39px;
                text-align: center;
                font-size: 14px;
                color: #0dafd2;
                display: inline-block;
                border-bottom: 1px solid #444444;
                margin-left: 9px;
            }
            h2 {
                font-size: 12px;
                color: #7d7c7c;
                margin-top: 20px;
                margin-left: 9px;
            }
            h3 {
                width: 125px;
                font-size: 12px;
                color: #7d7c7c;
                margin-top: 6px;
                margin-left: 9px;
            }
            p {
                width: 137px;
                margin-top: 5px;
                margin-left: 9px;
                padding-bottom: 15px;
                border-bottom: 1px solid #444444;
                a {
                    font-size: 14px;
                    color: #0dafd2;
                }
                a:hover {
                    color: #FFF;
                }
            }
            span{
                 width: 137px;
                display: inline-block;
                margin-top: 12px;
                margin-bottom: 12px;
                text-align: right;
                a{
                    font-size: 14px;
                      color: #0dafd2;
                }
                 a:hover {
                    color: #FFF;
                }
            }
        }
        .xinr{
              width: 155px;
            background: #252525;
            margin-top: 7px;
             h1 {
                width: 137px;
                height: 39px;
                line-height: 39px;
                text-align: center;
                font-size: 14px;
                color: #0dafd2;
                display: inline-block;
                border-bottom: 1px solid #444444;
                margin-left: 9px;
            }
            ul{
                 margin-top: 15px;
                li{
                    display: inline-block;
                    margin-left: 13px;
                   a{
                       display: inline-block;
                       font-size: 12px;
                       color: #7d7d7d;
                       float: left;
                       p{
                            margin-top: 9px; 
                            margin-bottom: 14px;
                       }
                   }
                }
                span{
                       width: 137px;
                display: inline-block;
                padding-top: 12px;
                margin-bottom: 12px;
                text-align: right;
                  border-top: 1px solid #444444;
                 a{
                    font-size: 14px;
                      color: #0dafd2;
                }
                }
            }
        }
        .fangke{
               width: 155px;
            background: #252525;
            margin-top: 7px;
            h1 {
                width: 137px;
                height: 39px;
                line-height: 39px;
                text-align: center;
                font-size: 14px;
                color: #0dafd2;
                display: inline-block;
                border-bottom: 1px solid #444444;
                margin-left: 9px;
            }
            ul{
                margin-top: 19px;
                li{
                    display: inline-block;
                    width: 130px;
                    height: 59px;
                    overflow: hidden;
                    margin-bottom: 11px;
                    margin-left: 9px;
                    span{
                        display: inline-block;
                        font-size: 14px;
                        width: 65px;
                        color: #7d7d7d;
                        vertical-align: top;
                        margin-left: 9px;
                    }
                    p{
                          display: inline-block;
                        font-size: 14px;
                        width: 55px;
                        color: #7d7d7d;
                     float: right;
                    margin-top: -36px;
                    margin-right: 13px;
                    }
                }
            }
            h2{
                      width: 137px;
                display: inline-block;
                padding-top: 12px;
                margin-bottom: 12px;
                text-align: right;
                padding-bottom:12px;
                  border-top: 1px solid #444444;
                  border-bottom: 1px solid #444444;
                   a{
                       font-size: 14px;
                      color: #0dafd2;
                   }
            }
            h3{
                display: inline-block;
                font-size: 14px;
                color: #7d7d7d;
                margin-left: 21px;
            }
             h4{
                display: inline-block;
                font-size: 14px;
                color: #7d7d7d;
                margin-left: 13px;
            }
            h5{
                display: inline-block;
                font-size: 12px;
                 color: #7d7d7d;
                 margin-left: 45px;
                 margin-top: 8px;
                 margin-bottom: 10px;
            }
            h6{
                display: inline-block;
                font-size: 12px;
                 color: #7d7d7d;
                 margin-left: 31px;
            }
        }
    }
            .foot{
   width: 1063px;
    height: 260px;
    background: black;
    margin:0 auto;
    .foot1{
        width: 972px;
        height: 259px;
        margin:0 auto;
        border-top:1px solid #262626;
        .foot2{
            border-bottom:1px solid #929292;
            ul{
                font-size: 0px;
                li{display: inline-block;
                height: 40px;
                line-height: 40px;
                    a{
           font-size: 12px;
           color: #929292;
           &:hover{
               color: #0dafd2;
           }
           &::after{
               content: "";
               height: 10px;
               line-height: 10px;
               width: 2px;
               background: #929292;
               display: inline-block;
               margin-left:6px;
               margin-right:6px;
               margin-top: -2px;
             }
            }
            &:last-child a::after{
                display: none;
            }
        }
    }
  }
  .foot3{
      border-bottom:1px solid #929292;
      overflow: hidden;
      position: relative;
      z-index:2;
      background: black;
     .left{
         display: inline-block;
          margin-left: 73px;
      ul{
          li{
              line-height:40px;
              height:40px;
              display: inline-block;
              margin-right: 10px;
              &:nth-child(3):hover .nei{
                  width:90px;
              }
               &:nth-child(4):hover .nei{
                  width:140px;
              }
              &::before{
                  content: "";
                  width: 1px;
                  height: 17px;
                  background: white;
                  display: inline-block;
                  margin-right: 9px;
                  transform: translateY(3px);
              }
              &:nth-child(1)::before{
                  display:none;
              }
               &:nth-child(2)::before{
                  display:none;
              }
               &:nth-child(3)::before{
                  display:none;
              }
              .nei{
                  height: 40px;
                  line-height: 40px;
                  vertical-align: top;
                  font-size: 12px;
                  width: 0px;
                  display: inline-block;
                  color: white;
                  overflow: hidden;
                  transition-duration:500ms;
                  a{
                      margin-left: 10px;
                  }
              }
              a{
                  font-size: 12px;
                  color: #0dafd2;
                  vertical-align: top;
                  text-align: center;
                  span{
                      vertical-align:top;
                      margin:0 9px;
                  }
                  
                  img{
                      vertical-align:middle;
                  }
              }
          }
      }
      }
      .right{
          display: inline-block;
          float: right;
          margin-right: 68px;
          ul{
              margin-top: 10px;
              display: inline-block;
              li{
                 display: inline-block;
                 height: 20px;
                 overflow: hidden;
                 vertical-align: top;
                 transition-duration:1s; 
                 margin-left: 10px;
                 background:black;
                 &:first-of-type:hover{
                     height:80px;
                 }
                 &:hover .a{
                    color:#0a97b6;
                 }
                 &:nth-child(3):hover{
                     height:110px;
                 }
                 p{
                     font-size: 12px;
                     color: #cbcbcb;
                     margin-top:10px;
                     background:#000000;
                     &:hover a{
                         color: #0a97b6;
                     }
                 }
                 .re{
                     color:#cbcbcb;
                 }
                  a{
                      font-size: 12px;
                      color:#cbcbcb;
                      span{
                          color: #0dafd2;
                          margin-left:5px;
                      }
                  }
              }
          }
      }
  }
  .big{
      min-width: 1063px;
      height: 171px;
      position: absolute;
      top:2948px;
  .logo{
      display: inline-block;
      margin-left: 56px;
      margin-top: 40px;
      vertical-align: top;
  }
  .zho{
      display: inline-block;
      margin-left:60px;
      margin-top: 30px;
  }
  .ce{
      display: inline-block;
      vertical-align: top;
      margin-top: 35px;
      margin-left: 25px;
      h1{
          font-size: 12px;
         color: #bebebe;
         font-weight: 100;
      }
      p{
         vertical-align: top;
          a{
              font-size: 12px;
              color: #bebebe;
              letter-spacing: 5px;
              &::before{
                  content:"";
                  width: 1px;
                  height: 12px;
                  line-height: 12px;
                  background:#bebebe;
                  display: inline-block;
                  transform: translateY(2px);
                  margin-right:3px;
              }
              &:nth-child(1)::before{
                  display: none;
              }
          }
          span{
              font-size: 12px;
              color: #bebebe;
              margin: 0 3px;
          }
      }
     div{
         display: inline-block;
          width:220px;
          font-size: 12px;
          list-style: none;
          margin-top: 15px;
          color: #bebebe;
      }
  }
}
}
}